<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>教师管理</el-breadcrumb-item>
      <el-breadcrumb-item>录入教师</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10">
      <!--添加教师的按钮-->
      <el-col :span="6">
        <el-button type="primary" @click="addteacherdialog = true" style="margin-left: -104px;">添加教师</el-button>
      </el-col>
    </el-row>
    <!-- 弹出的添加模态框 -->
    <el-dialog title="添加教师" :visible.sync="addteacherdialog" @close="clearuseradd">
      <el-form :model="addteacherform" :rules="addrules" ref="addform" label-width="auto"  style="width:85%"
               class="demo-form-inline form">
        <el-form-item prop="teaId" label="教师工号" >
          <el-input v-model="addteacherform.teaId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="teaName" label="教师姓名" >
          <el-input v-model="addteacherform.teaName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="teaSex">
          <el-radio-group v-model="addteacherform.teaSex" >
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="teaPhone" label="手机号码" >
          <el-input v-model="addteacherform.teaPhone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在学院" prop="teaAcademy">
          <el-select v-model="addteacherform.teaAcademy" placeholder="请选择学院" filterable >
            <el-option label="计算机科学学院" value="计算机科学学院"></el-option>
            <el-option label="电子信息学院" value="电子信息学院"></el-option>
            <el-option label="纺织科学与工程学院" value="纺织科学与工程学院"></el-option>
            <el-option label="机电工程学院" value="机电工程学院"></el-option>
            <el-option label="环境与化学工程学院" value="环境与化学工程学院"></el-option>
            <el-option label="管理学院" value="管理学院"></el-option>
            <el-option label="服装与艺术设计学院" value="服装与艺术设计学院"></el-option>
            <el-option label="人文社会科学学院" value="人文社会科学学院"></el-option>
            <el-option label="理学院" value="理学院"></el-option>
            <el-option label="新媒体艺术学院" value="新媒体艺术学院"></el-option>
            <el-option label="马克思主义学院" value="马克思主义学院"></el-option>
            <el-option label="应用技术学院" value="应用技术学院"></el-option>
            <el-option label="材料工程学院" value="材料工程学院"></el-option>
            <el-option label="城市规划与市政工程学院" value="城市规划与市政工程学院"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="teaTitle" label="教师职称" >
          <el-input v-model="addteacherform.teaTitle" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="teaPwd" label="教师密码" >
          <el-input type="password" v-model="addteacherform.teaPwd" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addteacherdialog = false">取 消</el-button>
        <el-button type="primary" @click="addTeacher">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>

</template>

<script>
  import axios from 'axios';//axios
  import Qs from 'qs';//qs
  export default {
    name:"insertTeacher",
    //绑定数据
    data() {
      return {
        addteacherdialog:false,//默认时关闭模态框的
        addteacherform:{
          teaId:"",
          teaName:"",
          teaSex:"",
          teaPhone:"",
          teaAcademy:'',
          teaTitle:"",
          teaPwd:"",
        },//form表单中的数据绑定
        addrules:{
          teaName:[
            //--用户名和密码不能为null，且用户名和密码的长度为3-6之间
            {required:true,message:"姓名为必填项",trigger:'blur'},
            {min:2,max:6,message: "姓名的长度为2-6之间",trigger: 'blur'}
          ],
          teaPhone:[
            // 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确
            { required: true, message: '请输入手机号码', trigger: 'change' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
          ],
          teaPwd:[
            //--用户名和密码不能为null，且用户名和密码的长度为3-6之间
            {required:true,message:"密码为必填项",trigger:'blur'},
            {min:3,max:6,message: "密码的长度为3-6之间",trigger: 'blur'}
          ]
        },
      }
    },
    //文档加载事件,当没有任何按钮去点击触发事件时，可以使用该函数在加载时，触发事件！
    mounted() {
      // 打开添加教师的模态框
      this.addteacherdialog = true;
    },
    methods:{
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //添加教师
      addTeacher() {
        var addInfo = this;
        //判断当前校验是否通过
        this.$refs.addform.validate((valid) => {
          if(valid) {
            //发送axios请求
            axios({
              headers:{'Content-Type':'application/x-www-form-urlencoded'},
              method:"post",
              url:"http://localhost:1313/teacher/teacherInsert",
              data:Qs.stringify(addInfo.addteacherform)
            }).then((res)=>{
              console.log(res)
              if (res.data.code == 200) {
                //1.提示消息，是否添加成功
                this.$message({
                  message: res.data.msg,
                  type:"success",
                });
                //2.关闭模态框
                this.addteacherdialog=false;
              } else {
                this.$message.error(res.data.msg)
              }
            })
          }
        });
      },
      //关闭添加教师的模态框
      clearuseradd() {
        // 重置表单内容
        this.$refs.addform.resetFields();
      },
    },
  }

</script>

<style>
  .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }

  .el-button--info.is-plain {
    color: #704141;
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  .el-button--mini {
    font-size: 14px;
    border-radius: 3px;
  }
  .el-breadcrumb{
    padding-bottom: 20px;
  }
  .el-pagination{
    padding-top: 20px;
  }
</style>
